<template>
  <div class="contract-management">
    <a-row type="flex" justify="center" align="middle">
      <a-col :span="8">
        <a-form layout="inline">
          <a-form-item>
            <a-input v-model="searchTemplateState.name" placeholder="请输入模板/项目名称" allow-clear>
              <a-icon slot="prefix" type="user" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="onSearch">
              <a-icon type="search" />查询
            </a-button>
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :span="4" :offset="12" style="text-align:right;">
        <a-button type="primary" @click="onNewTemplate">
          <a-icon type="plus" />新建模板
        </a-button>
      </a-col>
    </a-row>
    <a-table class="contract-table" rowKey="id" :columns="columns" :data-source="dataSource" :pagination="{
      current: searchTemplateState.page,
      pageSize: searchTemplateState.size,
      total: total,
      showLessItems: true,
      onChange: onPageChange,
      onShowSizeChange: onSizeChange,
    }">>
      <template slot="status" slot-scope="text, record">
        <a-badge v-if="record.status=='1'" color="green" text="启用" />
        <a-badge v-else color="red" text="禁用" />
      </template>
      <template slot="operation" slot-scope="text, record">
        <a-space :size="size">
          <a class="ant-dropdown-link" @click="onDetail(record.id)">详情</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link" @click="onEdit(record.id)">编辑</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link" @click="onView(record.id)">查看模板</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定要删除该合同模板吗?" ok-text="确定" cancel-text="取消" @confirm="onConfirmDelete(record.id)">
            <a class="ant-dropdown-link">删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
    <!-- 新建模板弹窗 -->
    <a-modal title="新增模板" v-model="isNewTemplate" :width="360" @ok="handleOk" @cancel="handleCancel(0)">
      <a-form-model ref="addTemplate" :model="templateForm" :rules="templateFormRules" :label-col="{span:6}" :wrapper-col="{span:12}">
        <a-form-model-item label="模板名称" prop="templateBaseName">
          <a-input v-model="templateForm.templateBaseName" placeholder="请输入模板名称" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="适用项目" prop="projectBaseName">
          <a-select v-model="templateForm.projectBaseName" placeholder="请选择适用项目" @change="onSelectChange" allow-clear>
            <a-select-option v-for="project in projectList" :key="project.projectId" :value="project.projectId+' '+project.projectName">{{project.projectName}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="模板状态" prop="status">
          <a-switch :checked="templateForm.status==1?true:false" />
        </a-form-model-item>
        <a-form-model-item label="上传模板" prop="template">
          <a-upload accept=".pdf" :action="get_OSS_config" :customRequest="onUpdate">
            <a-button type="primary">
              <a-icon type="file" />点击上传PDF模板
            </a-button>
          </a-upload>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 详情弹窗 -->
    <a-modal v-model="isContractDetail" title="合同详情" :width="360" @cancel="handleCancel(1)" footer :body-style="{'padding-top': '10px'}">
      <a-descriptions title=" " :column="1">
        <a-descriptions-item label="模板ID">{{nowTemplate.projectBaseId}}</a-descriptions-item>
        <a-descriptions-item label="模板名称">{{nowTemplate.templateName}}</a-descriptions-item>
        <a-descriptions-item label="适用项目">{{nowTemplate.projectBaseName}}</a-descriptions-item>
        <a-descriptions-item label="模板状态">{{nowTemplate.status}}</a-descriptions-item>
        <a-descriptions-item label="创建人">{{nowTemplate.createBy}}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{templateDetailCreateTime}}</a-descriptions-item>
        <a-descriptions-item label="更新时间">{{templateDetailUpdateTime}}</a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<script>
import { transferDate, upLoadAliyun } from '@/utils/util';
import { get_OSS_config } from '@/services/api';
import {
  queryTemplate,
  addTemplate,
  deleteTemplate,
  templateDetail,
  template,
  uploadTemplate,
  queryProject,
} from '@/services/contract';
export default {
  name: "contractManagement",
  data () {
    return {
      total: 0,
      get_OSS_config: get_OSS_config,
      get: 'get',
      columns: [
        {
          title: "模板名称",
          dataIndex: "templateName",
          scopedSlots: { customRender: "templateName" }
        },
        {
          title: "模板id",
          dataIndex: "projectBaseId",
          scopedSlots: { customRender: "projectBaseId" }
        },
        {
          title: "项目名称",
          dataIndex: "projectBaseName",
          scopedSlots: { customRender: "projectBaseName" }
        },
        {
          title: "模板状态",
          dataIndex: "status",
          scopedSlots: { customRender: "status" }
        },
        {
          title: "创建人",
          dataIndex: "createBy",
          scopedSlots: { customRender: "createBy" }
        },
        {
          title: "更新时间",
          dataIndex: "createTime",
          scopedSlots: { customRender: "createTime" }
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" }
        }
      ],
      dataSource: [],
      size: 2,
      isNewTemplate: false,
      isContractDetail: false,
      nowTemplate: [],
      nowTemplateId: null,
      templateForm: {
        templateBaseName: "",
        projectBaseId: undefined,
        projectBaseName: undefined,
        status: 1,
        code: "9e45f8d1a58248c293d5540398e5c4db",
        id: ""
      },
      templateFormRules: {
        templateBaseName: [
          {
            required: true,
            message: "模板名称不允许为空！",
            trigger: "blur"
          }
        ],
        projectBaseName: [
          { required: true, message: "必须选择适用项目！", trigger: "change" }
        ]
      },
      searchTemplateState: {
        name: "",
        page: 1,
        size: 10
      },
      nowTemplateType: 0,
      projectList: []
    };
  },
  computed: {
    templateDetailCreateTime () {
      return this.nowTemplate.createTime ? transferDate(this.nowTemplate.createTime, 2) : ''
    },
    templateDetailUpdateTime () {
      return this.nowTemplate.updateTime ? transferDate(this.nowTemplate.updateTime, 2) : ''
    },
  },
  methods: {
    onUpdate (info) {
      console.log("info", info);
      upLoadAliyun(info).then(res => {
        console.log('bb', res)
        let url = res.filePath;
        uploadTemplate({ url: url }).then(res => {
          console.log("uploadTemplate", res);
          if (res.data.code == 200) {
            alert(res.data.data)
          }
        })
      })
    },
    onSearch () {
      this.getTemplateList(this.searchTemplateState);
    },
    onNewTemplate () {
      this.nowTemplateType = 0;
      this.templateForm.id = "";
      this.isNewTemplate = true;
      this.getProjectList()
    },
    onEdit (id) {
      this.nowTemplateType = 1;
      this.templateForm.id = id;
      this.isNewTemplate = true;
      this.getProjectList()
    },
    onView (id) {
      // this.nowTemplateId = templateId;
      template({ id: id }).then(res => {
        if (res.data.code == 200) {
          window.open(res.data.data,
            "_blank"
          );
        }
      })
    },
    onDetail (id) {
      templateDetail({ id: id }).then(res => {
        if (res.data.code == 200) {
          this.nowTemplate = res.data.data
        }
      })
      this.isContractDetail = true;
    },
    onSelectChange (value) {
      this.templateForm.projectBaseId = value.split(' ')[0]
      this.templateForm.projectBaseName = value.split(' ')[1]
    },

    onConfirmDelete (id) {
      this.dataSource = this.dataSource.filter(
        val => val.id != id
      );
      deleteTemplate({ id: id }).then(res => {
        console.log(res);
      })
    },
    handleOk () {
      const that = this
      that.$refs.addTemplate.validate(valid => {
        if (valid) {
          alert("submit!");
          addTemplate(that.templateForm).then(res => {
            if (res.data.code == 200) {
              that.isNewTemplate = false;
              that.getTemplateList(that.searchTemplateState);
            }
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleCancel (i) {
      if (i == 0) {
        this.isContractDetail = false;
        this.$refs.addTemplate.resetFields();
      } else {
        this.isNewTemplate = false;
      }
    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (page, pageSize) {
      this.searchTemplateState.page = page
      this.searchTemplateState.size = pageSize
    },
    onSizeChange (current, size) {
      this.searchTemplateState.page = 1
      this.searchTemplateState.size = size
    },
    /**
     * @description: 获取模板列表
     * @param {*}
     * @return {*}
     */
    getTemplateList (params) {
      queryTemplate(params).then(res => {
        if (res.data.code == 200) {
          const data = res.data.data;
          this.dataSource = data.content;
          for (var i of this.dataSource) {
            i.createTime ? i.createTime = transferDate(i.createTime, 2) : ''
          }
        }
      })
    },
    /**
     * @description: 获取项目下拉列表
     * @param {*}
     * @return {*}
     */
    getProjectList () {
      queryProject().then(res => {
        if (res.data.code == 200) {
          this.projectList = res.data.data
        }
      })
    }
  },
  mounted () {
    this.getTemplateList(this.searchTemplateState);
  }
};
</script>

<style scoped lang="less">
.contract-management {
  background: #fff;
  padding: 20px 60px;
  .contract-table {
    margin-top: 20px;
  }
}
</style>
